<template>
  <div :key="wangkey" :id="`div${wangkey}`"></div>
</template>

<script>
import E from "wangeditor";
import { getToken } from "@/utils/auth";
export default {
  props: {
    wangkey: {
      type: Number
    },
    list: {
      type: Array,
      default: []
    },
    uploadimg: {
      type: String
    },
    isStudy: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editor: {},
      address: process.env.VUE_APP_BASE_API
    };
  },
  mounted() {
    if (!this.wangkey) return;
    // console.log("wochufale");
    const editor = new E(`#div${this.wangkey}`);
    // "image",
    // 判断是否有上传图片接口
    if (this.uploadimg) {
      // 有图片的接口的时候
      if (this.isStudy) {
        // 是学习模块
        editor.config.excludeMenus = [
          "head",
          "bold",
          "fontSize",
          "fontName",
          "italic",
          "underline",
          "strikeThrough",
          "indent",
          "lineHeight",
          "foreColor",
          "backColor",
          "link",
          "list",
          "todo",
          "justify",
          "quote",
          "emoticon",
          "video",
          "table",
          "code",
          "splitLine",
          "undo",
          "redo"
        ];
      } else {
        // 不是学习模块
        editor.config.excludeMenus = ["emoticon", "video", "table"];
      }
    } else {
      // 没有图片的接口的时候
      editor.config.excludeMenus = ["emoticon", "video", "image", "table"];
    }
    editor.config.showFullScreen = false; //取消全屏
    editor.config.showLinkImg = false; //关闭网络上传
    editor.config.pasteIgnoreImg = true; //忽略粘贴的图片

    // 添加 http 请求的 header
    editor.config.uploadImgHeaders = {
      Authorization: "Bearer " + getToken()
    };
    // 配置 server 接口地址
    editor.config.uploadImgServer = `${this.address}${this.uploadimg}`;
    // 自定义 fileName
    editor.config.uploadFileName = "file";
    // 限制一次最多能传几张图片
    editor.config.uploadImgMaxLength = 1; // 一次最多上传 5 个图片
    // 回调函数
    editor.config.uploadImgHooks = {
      customInsert: function(insertImgFn, result) {
        // result 即服务端返回的接口
        console.log("customInsert", result);
        if (result.code == 200) {
          // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
          for (let key in result.data) {
            insertImgFn(result.data[key]);
          }
        }
      }
    };
    // 菜单栏提示为下标
    editor.config.menuTooltipPosition = 'down'

    editor.config.onchange = html => {
      this.$emit("change", html);
    };
    editor.create();

    this.editor = editor;

    this.$watch("value", value => {
      editor.txt.html(this.value);
      console.log(editor.txt.html(this.value));
    });
  },
  watch: {
    list: {
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal);
        let content = "";
        for (let index = 0; index < newVal.length; index++) {
          content += `${newVal[index]}`;
        }

        // if (content) {
        //   this.editor.txt.html(content);
        // } else {
        //   this.editor.txt.html(this.editor.txt.html());
        // }
        this.$nextTick(() => {
          setTimeout(() => {
            this.editor?.txt?.html(content);
          }, 100);
        });

        // this.editor.txt.html(content);
      },
      immediate: true //监听第一次
    }
  },
  methods: {
    getEditorDataFn() {
      return this.editor.txt.html();
    },
    setEditorDataFn(content) {
      this.editor?.txt?.html(content);
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep ul,
::v-deep li{
  list-style: disc;
}
::v-deep .w-e-text {
  padding: 0 2em;
  word-wrap: break-word;
}
::v-deep .placeholder {
  margin-left: 2em;
}
</style>